<template>
  <div class="Echarts" style="width:1200px; height:840px;">
    <div v-show="!this.wait && this.size!=0 && !isAll" id="tubiaomain9" style="width:1200px; height:840px;"></div>
    <div v-show="!this.wait && this.size!=0 && isAll" id="tubiaomain09" style="width:1200px; height:840px;"></div>
		<div v-show="this.wait || this.size==0" class="nodata">
			<div v-if="this.wait" style="position: absolute; top: 300px; left: 522px;letter-spacing: 9px;opacity: 0.8;">正在拼命加载中...</div>
			<div v-else style="position: absolute; top: 300px; left: 800px;letter-spacing: 9px;opacity: 0.8;">暂无数据</div>
		</div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  data() {
  	return{
			industry: '',
			nodes:[],
			links:[],
			categories:[],
			legend_categories: {},
			size: 1,
			repulsion: 150,
			symbolSize: 400,
			edgeLength: 200,
			width: 1,
			myChart0: null,
			myChart: null,
			isAll: true,
			wait: true
			// green:
		}
  },
	props: {},
  methods: {
		async getList(url){
			let d
			this.wait = true
			// await this.$api.get('/es/jsc/cyjh_main_new',{industry: this.name2, xfhy: this.name3})
			// await this.$api.get('/es/jsc/cyjh_main_new',{industry: '先进有色金属材料'})
			await this.$api.get(url, {industry: this.industry, request_type: this.$store.state.request_type})
				.then((response) => {
					if(response.data['主图数据']){
						d = response.data['主图数据']
					}else{
						d = response.data
					}
					// let {nodes, links,categories} = {...response.data}
					let {nodes, links,categories} = {...d}
					nodes.forEach(element => {
						element.itemStyle = {
							opacity: 0.7
						}
						element.symbolSize = 3*Math.log(3*element.value) + element.value/400
						// element.symbolSize = this.judgeSize(element.value)

					})
					links.forEach(link => {
						link.lineStyle = {
							color: '#9E0D0D'
						}
					})

					this.nodes = nodes
					this.links = links
					// this.nodes.forEach(node => {
					// 	node.itemStyle.color = node.color
					// })
					// console.log(this.nodes);
					// this.categories = categories
					this.mycategories = categories
					categories.forEach(element => {
						// console.log(element);
						this.categories.push({"name": element})
						this.legend_categories[element] = true
					})
					console.log(nodes.length, links.length)
					// console.log(nodes)

					this.wait = false
					this.size = this.links.length
					if(this.size == 0){
						console.log('暂无数据')
						// this.myChart.clear()
						if(!this.isAll){
							this.myChart.clear()
						}
						return
					}
					// this.judge()
					// console.log('size为： ', this.name2, this.name3,this.size, this.repulsion, this.symbolSize, this.edgeLength, this.width);
					// console.log(this.links, this.nodes,this.categories)
					this.myEcharts()
				})
				.catch((error) => {
					this.wait = false
					this.size = 0
					console.log(error)
				})
	  },
		judgeSize(s){
			let size = 10
			if(s>1000){
				// size = Math.max(s/120 * Math.log(s/1000 +1), 40) // 40--
				size = 5*(0.004*s*Math.log(s/1000 +1))+ 24 // y18-36 x100-1000
				
			}else if(s>100){
				// size = Math.min(Math.max(s/30 * Math.log(s/100 +1), 18),36) // y18-36 x100-1000
				size = 4*(0.02*s) + 16 // y18-36 x100-1000

			}else if(s>10){
				// size = Math.max(s/7 * Math.log(s/10 +1), 14)
				size = 0.22*s + 11.78 // y  14-34  x 10-100
			}else{
				size = 1.1*s + 0.89 //  y 2-12 x 1-10
			}
			return size
		},
    myEcharts(){
			// console.log(this.nodes)
      // this.myChart = this.$echarts.init(document.getElementById('tubiaomain'),'white', {renderer: 'canvas'});
      //配置图表
      var option = {
				    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
					"#58d9f9",
					"#7ad9a3",
					"#f958c3",
					"#5873f9",
					"#fff9c1",
				],
    "series": [
        {
            "type": "graph",
            "layout": "none",
            "symbolSize": 10,
            "circular": {
                "rotateLabel": false
            },
            // "force": {
            //     "repulsion": 50,
            //     "edgeLength": 50,
            //     "gravity": 0.2
            // },
            "label": {
							"show": true,
							"distance": 0,
							"position": "top",
							"margin": 0,
							"color": '#fff',
							"borderWidth": 0
            },
            "lineStyle": {
                "show": true,
                "width": 0.5,
                "opacity": 0.7,
                "curveness": 0.3,
                "type": "solid"
            },
            "roam": true,
            "draggable": false,
            "focusNodeAdjacency": true,
            "data": this.nodes,
            "categories": this.categories,
            "edgeLabel": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "edgeSymbol": [
                null,
                null
            ],
            "edgeSymbolSize": 10,
            "links": this.links,
            "labelLayout": {
                "hideOverlap": true
            }
        }
    ],
		"legend": [
			{
				"width": '100%',
				"data": this.mycategories,
				"selected": this.legend_categories,
				"show": true,
				// "padding": [0,0,2,0],
				"itemGap": 10,
				"itemWidth": 18,
				"itemHeight": 12,
				"textStyle": {
					"color": '#C1E2FF',
					"fontSize": 15,
					// "padding": [-5,0,0,0]
				},
				"left": '51%'
			}
		],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },

			}
				
			if(this.isAll){
				this.myChart0.setOption(option)
			}else{
				this.myChart.setOption(option)
			}
    },
		judge(){
			if(this.size>3000){
				this.repulsion = 3
				this.symbolSize = 5
				this.edgeLength = 3
				this.width = 2
			}else if(this.size>1900){
				this.repulsion = 10
				this.symbolSize = 6
				this.edgeLength = 12
				this.width = 6

			}else if(this.size>900){
				this.repulsion = 17
				this.symbolSize = 8
				this.edgeLength = 15
				this.width = 8
			}else if(this.size>500){
				this.repulsion = 25
				this.symbolSize = 12
				this.edgeLength = 20
				this.width = 8

			}else if(this.size>300){
				this.repulsion = 40
				this.symbolSize = 14
				this.edgeLength = 40
				this.width = 10

			}else{
				this.repulsion = 100
				this.symbolSize = 18
				this.edgeLength = 80
				this.width = 10
			}
		},
		setHighLight(company) {
			this.myChart.dispatchAction({
        type: 'highlight',
				// type: 'select',
        // seriesIndex: 0,
        // dataIndex: data.charPie3currentIndex
				name: company
      })
		}
  },
	watch: {
		// '$route.query.cyljb': function(){
		// 	this.name2 = this.$route.query.cyljb
		// 	console.log('name2 '+ this.name2)
		// 	if(this.name2 == '全部'){
		// 		// 切换为‘全部’的缓存组件
		// 		this.isAll = true
		// 	}else{
		// 		this.isAll = false
		// 		this.getList()
		// 	}
		// },
		'$route.query.industry': function(v){
			console.log('------- ',v);
			this.industry = v
			if(this.industry){
				this.isAll = false
				console.log('name2 请求graph')
				this.getList('/es/jsc/cyjh_main_new')
			}
		},
		'$store.state.jinghe_companyName': function(){
			console.log('jinghe_companyName ',this.$store.state.jinghe_companyName)
			this.setHighLight(this.$store.state.jinghe_companyName)
		},
		'$store.state.request_type': function(){
			this.industry = this.$route.query.industry
			console.log('request_type ',this.$store.state.request_type)
			// 判断当前路由
			console.log(this.$route.name);
			// 重点外企的主图
			console.log('更新主图',this.industry);
			
			if(this.$route.name=='jingheRight6'){
				this.getList('/es/jsc/cyjh_zdwq_new')
			}else if(this.$route.name=='jingheRight2'){
				this.getList('/es/jsc/cyjh_main_new')
			}else if(this.$route.name=='jingheRight5'){
				this.getList('/es/jsc/cyjh_main_new')
			}
		},
		'$route.query.change1':{
			immediate: true,
			handler(v){
				this.industry = v
				if(v && v!='全部'){
					this.getList('/es/jsc/cyjh_zdwq_new')
				}else if(v=='全部'){
					console.log('quanbu');
					// 清空当前echart实例
					this.myChart.clear()
					this.myChart0.clear()
				}
			}
		},
		'$route.query.change2':{
			immediate: true,
			handler(v){
				this.industry = v
				if(v){
					this.getList('/es/jsc/cyjh_main_new')
				}
			}
		}
	},
  mounted(){
		// console.log(document.getElementById('tubiaomain'))
		this.myChart = this.$echarts.init(document.getElementById('tubiaomain9'),'white', {renderer: 'canvas'});
		this.myChart0 = this.$echarts.init(document.getElementById('tubiaomain09'),'white', {renderer: 'canvas'});
		
		this.industry = this.$route.query.industry
		// this.name3 = this.$route.query.xfly

		// this.getList('/es/jsc/cyjh_main_new')
		// this.setHighLight('内蒙古包钢钢联股份有限公司')
  }
}
</script>
 
 
<style>
.nodata {
	/* width: 1000px;
	height: 400px; */
	color: #fff;
	font-size: 24px;
	position: relative;
	/* top: 0;
	right: 0; */
}
</style>